/**
 *
 * 功能：
 *  - 作为`NModal`的内容，添加了一些定制样式
 * Props：
 *  - `NCard`组件的`props`
 * 插槽：
 *  - `default`插槽
 *  - `action`插槽
 * 样式控制：
 *  - 头部背景色 -> 通过给组建添加`style[--title-color]`来控制
 *
 */
import { defineComponent, mergeProps, renderSlot } from 'vue'
import { NCard, cardProps, type CardProps, useThemeVars } from 'naive-ui'
import './modal-content.scss'

export default defineComponent({
  name: 'ModalContent',
  props: cardProps,
  setup() {
    const vars = useThemeVars()
    const overrideProps: CardProps = {
      bordered: false,
      closable: true,
      segmented: {
        content: true
      }
    }

    return {
      overrideProps,
      primaryColor: vars.value.primaryColor
    }
  },
  render() {
    return (
      <NCard
        {...mergeProps(this.$props, this.overrideProps)}
        {...this.$attrs}
        class="modal-content"
        style={{
          '--n-card-header-color': this.primaryColor
        }}
      >
        {{
          default: () => renderSlot(this.$slots, 'default'),
          action: () => renderSlot(this.$slots, 'action')
        }}
      </NCard>
    )
  }
})
